<template>
	<view :style="{height:(scrollheight+0)+'px'}">
		<van-notice-bar v-if="false" left-icon="volume-o"
			text="2022-12-10 11:34:30 超速预警： 车辆【桂BE2113】在四川省甘孜藏族自治州泸定县G318沪聂线 奇石玉石东南60米超速行驶,限速 40km/h，当前车速 55.9km/h"
			class="notice-swipe" />
		<!-- <map id="allmap"></map> -->
		<map class="map" id="allmap" :longitude="map.longitude" :latitude="map.latitude" scale="14" show-location="true"
			bindmarkertap="makertap" :markers="map.carMarkers" :polyline="map.polyline"></map>
		<div class="loginUserInfo">
			<div class="head_img">
				<van-icon v-if="userInfo.headImage==''" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
				<van-icon v-else :name="base_url+userInfo.headImage" color="white" />
			</div>
			<div class="txt_loginName">
				<span v-if="userInfo.loginName == ''">暂未登陆</span>
				<span v-else>欢迎你，{{userInfo.realName}}</span>
			</div>
		</div>
		<div class="statistics_num">
			<div>
				<text>{{onlineNum}}{{' '}}/{{' '}}{{zongNum}}</text>
			</div>
			<div>
				<text>在线数{{' '}}/{{' '}}总数量</text>
			</div>
		</div>
		<div class="color_describe">
			<div class="point_back">
				<div class="div_point" style="background-color: #91DA52;"></div>
				<div class="div_point" style="background-color: #288CCC;"></div>
				<div class="div_point" style="background-color: #C6C6C6;"></div>
			</div>
			<div class="point_back">
				<span>行驶</span>
				<span>停车</span>
				<span>离线</span>
			</div>
		</div>
		<view class="div_content" :style="{minHeight:(scrollheight-400)+'px'}">
			<div class="div_search">
				<van-icon name="search" color="#2979ff" size="28"></van-icon>
				<input @input="searchCarNoEvent" v-model="searchCarNo"
					style="width: 100%;height: 80rpx;margin-left: 10px;" placeholder="请输入搜索车牌号" />
				<!-- <van-button round type="primary" @click="searchCarNoEvent" size="small">搜索</van-button> -->
			</div>
			<van-row>
				<van-col span="6" style="text-align: center;">
					<div class="btn_img_back" style="background-color: #4F95FF;" @click="scanCode()">
						<image
							src="">
						</image>
					</div>
					<div class="btn_text">扫一扫</div>
				</van-col>
				<van-col span="6" style="text-align: center;">
					<div class="btn_img_back" style="background-color: #CECECE;" @click="inDevelopment()">
						<image
							src="">
						</image>
					</div>
					<div class="btn_text">历史轨迹</div>
				</van-col>
				<van-col span="6" style="text-align: center;">
					<div class="btn_img_back" style="background-color: #CECECE;" @click="inDevelopment()">
						<image
							src="">
						</image>
					</div>
					<div class="btn_text">超速预警</div>
				</van-col>
				<van-col span="6" style="text-align: center;">
					<div class="btn_img_back" style="background-color: #CECECE;padding-left: 1px;"
						@click="inDevelopment()">
						<image
							src="">
						</image>
					</div>
					<div class="btn_text">受控区域</div>
				</van-col>
			</van-row>
			<div class="div_carList" :style="{minHeight:(scrollheight-538)+'px'}">
				<van-row style="margin: 20rpx" v-for="(item,index) in carList" :key="index" v-if="carList != 0">
					<div class="tab_back" @click="goToGpsMap(item.longitude,item.latitude)">
						<van-col span="13">
							<div style="margin-bottom: 20rpx;" class="center_vertically">
								<span class="tab_span"
									:style="'background-color:'+(index%2==0?'#4F94FE':'#00DCA8')"></span>
								<text class="txt_carName">{{item.carNo}}</text>
								<van-tag type="primary">渣车</van-tag>
							</div>
							<div>
								<div style="padding: 0rpx;color: #777777;">
									<text class="text_tag"
										style="color: #666666;">{{item.bidName}}{{' '}}-{{' '}}{{item.companyName}}</text>
								</div>
							</div>
						</van-col>
						<van-col span="7">
							<div class="center_vertically text_tag" style="margin-bottom: 15rpx;">
								4 G ：
								<image :src="'../../static/images/'+(item.isOnline?'singnal_ok':'singnal_bad')+'.png'"
									style="width: 25px;height: 25px;"></image>
							</div>
							<div class="center_vertically text_tag">
								GPS：
								<image :src="'../../static/images/'+(item.gpsIsOnline?'gps_lime':'gps_gray')+'.png'"
									style="width: 25px;height: 25px;"></image>
							</div>
						</van-col>
						<van-col span="4">
							<div style="margin-bottom: 15rpx;height: 25px;" class="center_vertically text_tag">
								速度：
							</div>
							<div>
								<van-tag type="primary">{{item.speed}}km/h</van-tag>

							</div>
						</van-col>
					</div>
				</van-row>
			</div>
		</view>
		<van-popup :show="carSelect.addCarModal" round position="bottom" custom-style="padding:5% 2%"
			:lock-scroll="true" closeable @close="carSelect.addCarModal = false">
			<view style="margin: 5px 15px 20px 15px;font-weight: 700;">绑定车辆</view>
			<van-cell-group>
				<van-field required readonly label="项目编号" is-link arrow-direction="down" name="picker"
					input-class="input-disabe" v-model="carSelect.projectName" placeholder="选择项目" :border="true"
					@click.native="carModalColse('projectPricker')" />
			</van-cell-group>
			<van-cell-group>
				<van-field required readonly input-class="input-disabe" label="所属工区" is-link arrow-direction="down"
					v-model="carSelect.companyName" placeholder="所属工区" :border="true"
					@click.native="carModalColse('companyPricker')" />
			</van-cell-group>
			<van-cell-group>
				<van-field required label="二维码编号" autosize type="textarea" disabled v-model="addCarModel.protectorUUID"
					placeholder="二维码编号" :border="true" />
			</van-cell-group>
			<van-cell-group>
				<van-field required label="终端编号" :value="addCarModel.terminalNumber" type="number"
					placeholder="请输入车载终端正面的三位数编号" :border="true" @change="terminalNumberChange()" />
			</van-cell-group>
			<van-cell-group>
				<van-field required label="车牌号" :value="addCarModel.carNo" placeholder="请输入车牌号,例:川T88888" :border="true"
					@change="carNoChange()" />
			</van-cell-group>
			<van-cell-group>
				<van-field required readonly label="车辆类型" is-link arrow-direction="down" name="picker"
					input-class="input-disabe" v-model="carSelect.carTypeName" placeholder="请选择车辆类型" :border="true"
					@click.native="carModalColse('carTypePricker')" />
			</van-cell-group>
			<van-cell-group>
				<van-field required label="司机姓名" :value="addCarModel.driver" placeholder="请输入司机姓名" :border="true"
					@change="driverChange()" />
			</van-cell-group>
			<van-cell-group>
				<van-field required label="司机电话" :value="addCarModel.driverTelephone" type="number"
					placeholder="请输入司机电话号码" :border="true" @change="driverTelephoneChange()" />
			</van-cell-group>
			<!-- <van-cell-group>
				<van-field label="车身长度" :value="addCarModel.driver"
				placeholder="请输入车身长度(mm)" :border="true" @change="onChange()" />
			</van-cell-group>
			<van-cell-group>
				<van-field label="车身宽度" :value="addCarModel.carWidth"
				placeholder="请输入车身宽度(mm)" :border="true" @change="onChange()" />
			</van-cell-group> -->
			<van-cell-group>
				<van-field :value="addCarModel.remark" label="备注" type="textarea" placeholder="备注" autosize
					:border="true" @change="remarkChange()" />
			</van-cell-group>
			<br />
			<van-cell-group>
				<van-button type="primary" size="large" @click="addCarInfo()">提交</van-button>
			</van-cell-group>
		</van-popup>
		<!-- 选择项目 -->
		<van-popup :show="carSelect.projectPricker" position="bottom" clock-scroll>
			<van-picker :columns="carSelect.projectList" show-toolbar @confirm="projectConfirm"
				@cancel="carModalOpen('projectPricker')" />
		</van-popup>
		<!-- 选择工区 -->
		<van-popup :show="carSelect.companyPricker" position="bottom" clock-scroll>
			<van-picker :columns="carSelect.companyList" show-toolbar @confirm="companyConfirm"
				@cancel="carModalOpen('companyPricker')" />
		</van-popup>
		<!-- 选择车辆类型 -->
		<van-popup :show="carSelect.carTypePricker" position="bottom" clock-scroll>
			<van-picker :columns="carSelect.carTypeList" show-toolbar @confirm="carTypeConfirm"
				@cancel="carModalOpen('carTypePricker')" />
		</van-popup>
		<!-- <van-toast id="van-toast" /> -->

		<!-- 首次登陆，绑定平台用户 -->
		<van-popup :show="loginStatus == 0" round position="bottom" custom-style="height: 40%">
			<div style="height: 100%;width: 100%;">
				<div style="padding: 40rpx 20rpx;">
					<div style="font-weight: bold;">
						首次访问，请绑定【工程车辆安全调度系统】
					</div>
					<div style="font-size: 24rpx;color: #b8b8b8;margin-top: 15rpx;">
						若还没有【工程车辆安全调度系统】的账户，请联系管理员创建
					</div>
				</div>
				<div style="margin-top: 20rpx;">
					<van-field label="用户名" :value="loginInfo.LoginName" placeholder="请输入用户名" border="true"
						@change="onChangeLoginName()" required />
					<van-field label="密码" :value="loginInfo.InputPassword" placeholder="请输入密码" border="false"
						@change="onChangePassword()" type="password" required />
				</div>
				<div style="position: absolute;bottom:0rpx;width: 100%;">
					<van-button type="primary" style="height: 100rpx;" block @click="bindWeChat()">绑定</van-button>
				</div>
			</div>
		</van-popup>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight //获取状态栏高度
	// import Toast from '@/wxcomponents/vant/toast/toast';
	var _self;
	import mymap from '../../js/bmap-wx.min.js';
	import md5Libs from '@/common/js/md5.js';
	var bmap = null;
	export default {
		data() {
			return {
				//新增车辆 信息model
				addCarModel: {
					id: 0,
					projectNo: "", //项目编号
					companyId: 0, //工区id
					carType: "", //车辆类型
					carNo: "", //车牌号
					driver: "", //司机
					driverTelephone: "", //司机电话
					protectorUUID: "", //二维码编号
					volume: 4, //终端音量
					speakSpeed: 3, //终端语速
					powerOnClewTone: "开", //终端上电提示音
					dataUpFrequency: 5, //数据上传频率
					driveStatus: 0, // 行驶状态
					carLength: 5500, // 车身长度
					carWidth: 3500, // 车身宽度
					isOnline: true, // 是否在线
					remark: null, // 备注
					terminalNumber: "", // 车载终端编号
					cardNo: "", // 卡号
					speedLimit: 0, //本地限速值
					speedingAlarmFrequency: 15, //超速连续报警频率
					loginName: "", //登录用户
				},
				carSelect: {
					addCarModal: false,
					projectList: [], //项目下拉框数据
					projectPricker: false, //显示项目下拉框
					projectName: "",
					companyName: "",
					companyList: [], //公司下拉框数据
					companyPricker: false, //公司下拉框
					carTypeName: "", //车辆类型显示值
					carTypeList: [], //车辆类型下拉框数据
					carTypePricker: false, //车辆类型下拉框
					columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
				},
				ak: '96d5c4819f0baf6ea8378e80a3b6fe12', //znZM9LNG2GHiPXTV2Ypi0ono045SKBDk
				scrollheight: 750, //滚动区间列表高度
				statusBarHeight: statusBarHeight, //状态栏高度
				searchCarNo: "", //搜索的车牌号
				//车辆列表数据
				AllCarList: [],
				//搜索后的车辆列表数据
				carList: [],
				onlineNum: 0, //在线数量
				zongNum: 0, //总数
				map: {
					longitude: 102.191666,
					latitude: 30.020856,
					polyline: [], //地图的线路
					carMarkers: [], //地图上的图标
				},
				loginStatus: 1, //0 :暂未绑定平台，需绑定  1：已登录
				loginInfo: { //登录用户信息
					LoginName: "", // 用户名
					InputPassword: "", // 密码
					Password: "", // 加密后的密码
					OpenId: "" //微信用户唯一编号
				},
				userInfo: { //登陆后的用户信息
					"userId": 0,
					"loginName": "",
					"realName": "",
					"companyId": 0,
					"companyName": "",
					"mobile": "",
					"headImage": "",
					"isAdmin": false,
					"skin": "",
					"role": 0,
					"accessToken": "",
					"code": 0,
					"msg": ""
				},
				base_url:"",//后台地址
			}
		},
		onLoad() {
			_self = this;
			setTimeout(() => {
				uni.getSystemInfo({
					success(res) {
						_self.scrollheight = res.windowHeight - _self.statusBarHeight; //获取手机总高度-状态栏高度
					}
				});
			}, 500);

			//获取微信用户唯一编号
			this.loginInfo.OpenId = uni.getStorageSync('openid');
			this.base_url = this.$website.base_url;
			//第三方登录
			this.thirdPartyLogins();
			//初始化地图
			this.initMap();
		},
		mounted() {

		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			//用户名输入框
			onChangeLoginName(e) {
				this.loginInfo.LoginName = e.detail;
			},
			//密码输入框
			onChangePassword(e) {
				this.loginInfo.InputPassword = e.detail;
			},
			//提交绑定微信用户信息
			bindWeChat() {
				if (this.loginInfo.LoginName == "" || this.loginInfo.InputPassword == "") {
					uni.showToast({
						title: "请输入必填项！",
						mask: true,
						duration: 3000,
						icon: 'none'
					})
				} else {
					//md5加密
					this.loginInfo.Password = md5Libs.hex_md5(this.loginInfo.InputPassword).toUpperCase();
					//第三方登录
					this.thirdPartyLogins()
				}
			},
			//第三方登录
			thirdPartyLogins() {
				this.request({
					url: this.$website.thirdPartyLogins,
					data: this.loginInfo,
					method: 'post',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							//登录成功
							if (res.data.code == 0) {
								uni.setStorageSync('userInfo', res.data);
								_self.userInfo = res.data;
								console.log(_self.userInfo)
								_self.loginStatus = 1;
								_self.addCarModel.loginName = res.data.loginName;
								
								//获取所有线路
								_self.getAllRoadPoint();
								//获取下拉框的值
								_self.getSelect();
								//获取车辆列表
								_self.getCarList();
								//定时刷新数据
								setInterval(function() {
									//获取车辆列表
									_self.getCarList();
								}, 5000);
							}
							//用户暂未绑定平台，弹出绑定窗口
							else if (res.data.code == 404) {
								_self.loginStatus = 0;
							} else {
								uni.showToast({
									title: res.data.msg,
									mask: true,
									duration: 3000,
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: '请检查网络是否连接！',
								mask: true,
								duration: 3000,
								icon: 'none'
							})
						}
					}
				});
			},
			//初始化地图
			initMap() {
				bmap = new mymap.BMapWX({
					ak: 'znZM9LNG2GHiPXTV2Ypi0ono045SKBDk'
				});
			},
			//获取所有线路
			getAllRoadPoint() {
				this.request({
					url: this.$website.getAllRoadPoint,
					data: {
						type: "GCJ02",
						loginName: this.userInfo.loginName
					},
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								_self.map.polyline = [];
								//显示所有线路
								for (var j = 0; j < res.data.points.length; j++) {
									_self.map.polyline.push({
										color: "#07C160", //线的颜色
										width: 10, //线的宽度
										arrowLine: true, //带箭头的线
										borderColor: "#000", //线边框的颜色
										borderWidth: 1, //线的边框宽度，还有很多参数，请看文档
										points: [],
									})
									for (var i = 0; i < res.data.points[j].data.length; i++) {
										_self.map.polyline[j].points.push({
											longitude: res.data.points[j].data[i].longitude,
											latitude: res.data.points[j].data[i].latitude
										});
									}
								}

								//显示所有限速
								// for (var i = 0; i < res.data.fields.length; i++) {
								// 	var holeImg = "intunnel.png"
								// 	if (res.data.fields[i].type == "Hole") {
								// 		holeImg = "intunnel_gray.png"
								// 	}
								// 	//在地图上添加洞口标识
								// 	_self.map.carMarkers.push({
								// 		id: 999,
								// 		iconPath: "../../static/images/" + holeImg,
								// 		longitude: res.data.fields[i].longitude,
								// 		latitude: res.data.fields[i].latitude,
								// 		width: 30, //图片显示宽度
								// 		height: 30, //图片显示高度
								// 		title: res.data.fields[i].name, //标题
								// 		label: {
								// 			content: res.data.fields[i].name,
								// 			color: '#333',
								// 			anchorx: 2,
								// 			anchorY: 2,
								// 			borderwidth: 1,
								// 			bordercolor: '#000',
								// 			background: "#fff",
								// 			borderRadius: 5,
								// 			bgcolor: '#fff',
								// 			padding: 2,
								// 			textAlign: 'center'
								// 		}
								// 	});
								// }
								//显示所有限速点
								// for (var j = 0; j < res.data.limits.length; j++) {
								// 	_self.map.polyline.push({
								// 		color: "tomato", //线的颜色
								// 		width: 10, //线的宽度
								// 		arrowLine: true, //带箭头的线
								// 		borderColor: "#000", //线边框的颜色
								// 		borderWidth: 1, //线的边框宽度，还有很多参数，请看文档
								// 		points: [],
								// 	})
								// 	for (var i = 0; i < res.data.points[j].data.length; i++) {
								// 		_self.map.polyline[j].points.push({
								// 			longitude: res.data.limits[j].data[i].longitude,
								// 			latitude: res.data.limits[j].data[i].latitude
								// 		});
								// 	}
								// }
							} else {
								// this.$u.toast(res.data.msg);
							}
						} else {
							// this.$u.toast('系统异常');
						}
					}
				});
			},
			//工区下拉框点击确定
			companyConfirm(event) {
				this.addCarModel.companyId = event.detail.value.value;
				this.carSelect.companyName = event.detail.value.text;
				this.carModalOpen('companyPricker');
			},
			//项目下拉框点击确定
			projectConfirm(event) {
				this.addCarModel.projectNo = event.detail.value.value;
				this.carSelect.projectName = event.detail.value.text;
				this.carModalOpen('projectPricker');
			},
			//车辆类型下拉框点击确定
			carTypeConfirm(event) {
				this.addCarModel.carType = event.detail.value.value;
				this.carSelect.carTypeName = event.detail.value.text;
				this.carModalOpen('carTypePricker');
			},
			//新增弹框其他下拉框打开时关闭新增框
			carModalColse(name) {
				if (name != "" && name != undefined) {
					this.carSelect[name] = true;
				}
				this.carSelect.addCarModal = false;
			},
			//新增弹框其他下拉框关闭打开新增框
			carModalOpen(name) {
				if (name != "" && name != undefined) {
					this.carSelect[name] = false;
				}
				this.carSelect.addCarModal = true;
			},
			//获取下拉框的值
			getSelect() {
				//获取工区
				this.request({
					url: this.$website.select_companytrees,
					data: {
						loginName: this.userInfo.loginName,
					},
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								_self.carSelect.projectList = [];
								for (let i = 0; i < res.data.ztreeItems.length; i++) {
									let obj = res.data.ztreeItems[i];
									//只取工区的
									if (obj.name.search('工区') != -1) {
										//查找到父级
										let parent = res.data.ztreeItems.find((item) => {
											return item.id == obj.pId;
										})
										if (parent != undefined) {
											_self.carSelect.companyList.push({
												name: obj.name,
												value: obj.id,
												parentName: parent.name,
												text: parent.name + "-" + obj.name
											});
										}
									}
								}
								// //赋默认值
								// if (_self.carSelect.companyList.length > 0) {
								// 	_self.addCarModel.companyId = _self.carSelect.companyList[0].value;
								// 	_self.carSelect.companyName = _self.carSelect.companyList[0].text;
								// }
							} else {
								// this.$u.toast(res.data.msg);
							}
						} else {
							// this.$u.toast('系统异常');
						}
					}
				});
				//获取项目
				this.request({
					url: this.$website.select_project,
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								_self.carSelect.projectList = [];
								for (let i = 0; i < res.data.projectNoNames.length; i++) {
									let obj = res.data.projectNoNames[i];
									_self.carSelect.projectList.push({
										text: obj.projectName,
										value: obj.projectNo
									});
									if (i == 0) {
										_self.addCarModel.projectNo = obj.projectNo;
										_self.carSelect.projectName = obj.projectName;
									}
								}
							} else {
								// this.$u.toast(res.data.msg);
							}
						} else {
							// this.$u.toast('系统异常');
						}
					}
				});
				//获取车辆类型
				this.request({
					url: this.$website.getCodeMasta,
					data: {
						type: "CarType"
					},
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								_self.carSelect.carTypeList = [];
								for (let i = 0; i < res.data.codeMastaList.length; i++) {
									let obj = res.data.codeMastaList[i];
									_self.carSelect.carTypeList.push({
										text: obj.coderInfo,
										value: obj.code
									});
									if (i == 0) {
										_self.addCarModel.carType = obj.code;
										_self.carSelect.carTypeName = obj.coderInfo;
									}
								}
							} else {
								// this.$u.toast(res.data.msg);
							}
						} else {
							// this.$u.toast('系统异常');
						}
					}
				});
			},
			//获取车辆列表
			getCarList() {
				this.request({
					url: this.$website.getCarList,
					data: {
						type: "GCJ02",
						loginName: this.userInfo.loginName
					},
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								_self.AllCarList = res.data.carList;
								_self.onlineNum = _self.AllCarList.filter(item => item.isOnline == 1).length;
								_self.zongNum = _self.AllCarList.length;

								_self.searchCarNoEvent();
							} else {
								//this.$u.toast(res.data.msg);
							}
						} else {
							//this.$u.toast('系统异常');
						}
					}
				});
			},
			//搜索车牌号
			searchCarNoEvent() {
				if (this.searchCarNo != '' && this.searchCarNo != null) {
					this.carList = this.AllCarList.filter(item => item.carNo.match(this.searchCarNo));
				} else {
					this.carList = this.AllCarList;
				}
				_self.map.carMarkers = [];
				//在地图上添加点
				for (var i = 0; i < _self.carList.length; i++) {
					_self.map.carMarkers.push({
						id: _self.carList[i].carId,
						iconPath: "../../static/images/car1_" + (_self.carList[i]
							.gpsIsOnline ? (_self.carList[i].speed > 0 ?
								"green" : "blue") : "gray") + ".png",
						longitude: _self.carList[i].longitude,
						latitude: _self.carList[i].latitude,
						width: 20, //图片显示宽度
						height: 40, //图片显示高度
						title: _self.carList[i].carNo, //标题
						rotate: _self.carList[i].course, //旋转的角度
						label: {
							content: _self.carList[i].carNo,
							color: '#333',
							anchorx: 2,
							anchorY: 2,
							borderwidth: 1,
							bordercolor: '#000',
							background: "#fff",
							borderRadius: 5,
							bgcolor: '#fff',
							padding: 2,
							textAlign: 'center'
						}
					});
					if (_self.map.longitude == 0 && _self.carList[i].longitude != 0) {
						_self.map.longitude = _self.carList[i].longitude;
						_self.map.latitude = _self.carList[i].latitude;
					}
				}
			},
			//扫码功能
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						var uuid = res
							.result; //.replace("-", "").replace("-", "").replace("-", "").replace("-","");
						if (uuid.indexOf("-") > -1 && uuid.length == 36) {
							_self.addCarModel.protectorUUID = uuid;
							//根据二维码获取车辆信息
							_self.getCarInfoByUuid();
						} else {
							uni.showToast({
								title: "未知二维码",
								duration: 2000,
								icon: 'error',
							});
						}
					}
				});
			},
			//根据二维码获取车辆信息
			getCarInfoByUuid() {
				this.request({
					url: this.$website.getCarInfoByUuid,
					data: {
						protectorUUID: _self.addCarModel.protectorUUID
					},
					method: 'get',
					showLoading: false,
					success: res => {
						if (res.statusCode === 200) {
							switch (res.data.code) {
								case 0: //二维码已绑定
									uni.showToast({
										title: "该二维码已绑定车辆\r\n【" + res.data.carInfo.carNo + "】,请勿重复绑定",
										duration: 3000,
										icon: 'none',
									});
									break;
								case -1: //请求错误
									// this.$u.toast(res.data.msg);
									break;
								case 1043: //二维码未绑定
									//初始化新增车辆的值
									_self.addCarModel.companyId = 0;
									_self.addCarModel.carNo = "";
									_self.addCarModel.driver = "";
									_self.addCarModel.driverTelephone = "";
									_self.addCarModel.terminalNumber = "";
									_self.addCarModel.cardNo = "";

									_self.carSelect.addCarModal = true;
									break;
									//未找到该车牌号车辆
								case 1044:

									break;
							}
						} else {
							// this.$u.toast('系统异常');
						}
					}
				});
			},
			//终端编号输入框
			terminalNumberChange(e) {
				this.addCarModel.terminalNumber = e.detail;
				this.addCarModel.cardNo = e.detail;
			},
			//车牌号输入框
			carNoChange(e) {
				this.addCarModel.carNo = e.detail;
			},
			//司机输入框
			driverChange(e) {
				this.addCarModel.driver = e.detail;
			},
			//司机号码输入框
			driverTelephoneChange(e) {
				this.addCarModel.driverTelephone = e.detail;
			},
			//备注输入框
			remarkChange(e) {
				this.addCarModel.remark = e.detail;
			},
			//新增车辆
			addCarInfo() {
				if (this.addCarModel.companyId == 0 || this.addCarModel.companyId == undefined) {
					uni.showToast({
						title: "请选择所属工区",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.protectorUUID == "") {
					uni.showToast({
						title: "编号识别错误，请重新扫码",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.terminalNumber == "" || this.addCarModel.terminalNumber == "0") {
					uni.showToast({
						title: "请输入正确的终端编号",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.carNo == "") {
					uni.showToast({
						title: "请输入车牌号",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.carType == "" || this.addCarModel.carType == undefined) {
					uni.showToast({
						title: "请选择车辆类型",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.driver == "") {
					uni.showToast({
						title: "请输入司机姓名",
						duration: 2000,
						icon: 'none',
					});
				} else if (this.addCarModel.driverTelephone == "" || this.addCarModel.driverTelephone.length != 11) {
					uni.showToast({
						title: "请输入正确的司机电话号码",
						duration: 2000,
						icon: 'none',
					});
				} else {
					this.request({
						url: this.$website.addCarInfo,
						data: this.addCarModel,
						method: 'post',
						showLoading: false,
						success: res => {
							if (res.statusCode === 200) {
								if (res.data.code == 0) {
									uni.showToast({
										title: "新增成功",
										duration: 3000,
										icon: 'success',
									});
									_self.carSelect.addCarModal = false;
									//获取车辆列表
									_self.getCarList();
								} else {
									uni.showToast({
										title: "新增失败" + res.data.msg,
										duration: 3000,
										icon: 'none',
									});
								}
							} else {
								// this.$u.toast('系统异常');
							}
						}
					});
				}
			},
			//开发中
			inDevelopment() {
				uni.showToast({
					title: "功能开发中，敬请期待！",
					duration: 3000,
					icon: 'none',
				});
			},
			//点击列表跳转地图
			goToGpsMap(longitude, latitude) {
				_self.map.longitude = longitude;
				_self.map.latitude = latitude;
			},
		}
	}
</script>
<style lang="less" scoped>
	#allmap {
		background-color: #EFEEEA;
		width: 100%;
		height: 400px;
	}

	.div_content {
		background-color: #F7F7F7;
	}

	.div_search {
		background-color: white;
		width: 90%;
		height: 40px;
		position: relative;
		top: -20px;
		z-index: 50;
		margin: 0 auto;
		border-radius: 50px;
		box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.18);
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.btn_img_back {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn_img_back>image {
		width: 30px;
		height: 30px;
	}

	.btn_text {
		margin-top: 5px;
	}

	.notice-swipe {
		position: absolute;
		top: 10px;
		z-index: 50;
		width: 80%;
		left: 10%;
		border-radius: 10px;
		height: 30px;
		line-height: 30px;
	}

	.div_carList {
		width: calc(100% - 20px);
		// background: aliceblue;
		margin-top: 10px;
		padding: 0 10px;
	}

	.tab_back {
		padding: 20rpx;
		border-radius: 7px;
		background-color: rgb(255, 255, 255);
		/* background: linear-gradient(145.72deg, #006FE6 0%, rgba(82, 255, 220, 1) 100%); */
		box-shadow: 2px 4px 8px rgba(164, 174, 222, 0.5);
		margin-top: -10px;
		height: 60px;
	}

	//车辆名称
	.txt_carName {
		margin-right: 20rpx;
		font-size: 36rpx;
		color: #00689c;
		font-weight: bold;
	}

	//标签文字
	.text_tag {
		margin-right: 10rpx;
		font-size: 30rpx;
	}

	// 垂直居中
	.center_vertically {
		display: flex;
		align-items: center;
	}

	//车牌号前面的标签
	.tab_span {
		width: 5px;
		height: 17px;
		border-radius: 5px;
		margin-right: 5px;
	}

	//使用穿透（本来不能修改子组件的样式，只要在选择器加上 ::v-deep 就可以修改了）
	::v-deep .input-disabe {
		// pointer-events: none;
	}

	//统计数量
	.statistics_num {
		position: absolute;
		top: 320px;
		right: 10px;
		text-align: center;
		background: #0000004a;
		padding: 5px 10px;
		border-radius: 5px;
		color: white;
	}

	//车辆颜色描述框
	.color_describe {
		position: absolute;
		top: 320px;
		left: 10px;
		text-align: center;
		background: #0000004a;
		padding: 5px 10px;
		border-radius: 5px;
		color: white;
		width: 110px;
	}

	//车辆颜色描述背景
	.point_back {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 2.6px;
	}

	//车辆颜色描述点
	.div_point {
		width: 15px;
		height: 10px;
		border-radius: 10px;
	}

	.loginUserInfo {
		position: absolute;
		top: 10px;
		right: 10px;
		text-align: center;
		background: #0000004a;
		padding: 5px 10px;
		border-radius: 5px;
		color: white;
		display: flex;
		align-items: center;
	}

	.head_img {
		align-items: center;
		display: flex;
	}

	.txt_loginName {
		margin-left: 10rpx;
	}
</style>